<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:replace="publicPart ::commonHead">
    <meta charset="UTF-8">
    <title>人脸识别</title>
    <link href="../static/bootstrap-4.6.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../static/bootstrap-4.6.1-dist/js/bootstrap.js"></script>
    <script src="../static/jQuery/jquery-3.6.0.js"></script>
    <style>
        body,#main{
            margin: 0;
            padding: 0;
            background-image: url("http://seopic.699pic.com/photo/50073/6894.jpg_wh1200.jpg") ;
               /*加载背景图*/   /* 背景图不平铺 */
            background-size:cover;  /* 让背景图基于容器大小伸缩 */
            background-attachment:fixed;
        }
    </style>
</head>

<body>
<div class="container" style="margin-top: 60px">
    <center>
        <div class="alert alert-primary" style="width: 500px;margin-bottom: 15px">
            <strong id="warn">人脸识别！当取景框仅有您的脸时，请点击按钮识别</strong>
        </div>
        <div>
        <video id="v" style="border-style: ridge;width: 647px;height: 490px;border-width: 15px;background-color: black"></video>
        <canvas id="canvas" style="display:none;"></canvas>
        </div>
        <br/>
        <button data-toggle="tooltip" data-placement="top" title="人脸识别！当取景框仅有您的脸时，请点击按钮识别" class="btn btn-primary" id="take">识别</button>
    </center>
</div>
<!--<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">-->
<script>
    !(function () {
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let videoPlaying = false;
        let v = document.getElementById('v');
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
                v.srcObject = stream;
            } else {
                // 防止再新的浏览器里使用它，应为它已经不再支持了
                v.src = window.URL.createObjectURL(stream);
            }
            v.onloadedmetadata = function (e) {
                v.play();
                videoPlaying = true;
            };
        }).catch(err => {
            console.error(err.name + ": " + err.message);
        })
        document.getElementById('take').addEventListener('click', function () {
            if (videoPlaying) {
                let canvas = document.getElementById('canvas');
                canvas.width = v.videoWidth;
                canvas.height = v.videoHeight;
                canvas.getContext('2d').drawImage(v, 0, 0);
                var data = canvas.toDataURL('image/jpeg',1.0);
                let msg=document.getElementById("warn");
                msg.innerText="识别中···请不要重复点击";
                $.ajax({
                    type: "POST", // 数据提交类型
                    url: "/demo/checkface", // 发送地址
                    data: data, //发送数据
                    async: true, // 是否异步
                    processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    contentType: "application/json;charset=UTF-8", //
                    success:function (rst) {
                        msg.innerText=rst;
                        if(rst=="识别成功")
                            window.location.href = "/demo/main";
                            ;
                    },
                    error:function (rst) {
                        msg.innerText=rst;
                    }
                });
                // jQuery.post("checkface",data, function (rst) {
                //     msg.innerText=rst;
                //     if(rst=="识别成功")
                //         window.location.href = "/demo/main";
                // })
                // document.getElementById('photo').setAttribute('src', data);
            }
        }, false);
    })();
</script>
</body>

</html>